<template>
	<view class="ai-dialogue" :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar title="AI解读对话" bgColor="#FFE6DD" :autoBack="true" />
		<view class="">
			<view class="ai-text">
				嗨，我是你的新朋友循循，初次见面很开心。我呢可以根据人类图的专业知识，给你答疑解惑，
			</view>
			<view class="">
				<view class="common-problem flex-r s-b a-c mb-1">
					<view class="">
						常用问题
					</view>
					<text>换一批</text>
				</view>
				<up-grid col="2" gap="20rpx" :border="false" @click="handleAsk">
					<up-grid-item v-for="(item,i) in problemList" :key="i">
						<view class="problem-box">
							<view class="flex-r a-c">
								<view class="iconfont-color" style="font-family: iconfont">{{item.icon}}</view>
								<text class="p-type ml-1">{{item.type}}</text>
							</view>
							<text class="p-text">{{item.problem}}</text>
						</view>
					</up-grid-item>
				</up-grid>
			</view>
			<view class="ask-box">
				<view class="flex-r tips mb-1">
					<text><text class="iconfont-color icon-gerenxingge" /> 我是一个什么样的人？</text>
					<text class="ml-1"><text class="iconfont-color icon-qingganfenxi" /> 什么样的人会喜欢我？</text>
				</view>
				<up-input placeholder="和我对话吧" suffixIcon="arrow-upward" suffixIconStyle="color: #909399"></up-input>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const problemList = reactive([{
			icon: '\ue750',
			type: '个人性格',
			problem: '我是一个什么样的人？'
		},
		{
			icon: '\ue74b',
			type: '情感分析',
			problem: '什么样的人会喜欢我？'
		},
		{
			icon: '\ue748',
			type: '工作/事业前途',
			problem: '我如何缓解工作压力？'
		},
		{
			icon: '\ue740',
			type: '财富高度',
			problem: '在钱财方面我需要注意什么？？'
		},
	])
	const handleAsk = (name) => {
		console.log(name);
	};
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(180deg, #FFE6DD 0%, #FFFFFF 100%);
	}

	.ai-dialogue {
		background: linear-gradient(180deg, #FFE6DD 0%, #FFFFFF 100%);
		min-height: calc(100vh - 150rpx);
		padding: 20rpx;

		.ai-text {
			font-size: 28rpx;
			color: #6F6F6F;
			padding: 40rpx;
		}

		.common-problem {
			view {
				font-weight: bold;
				font-size: 36rpx;
			}

			text {
				font-size: 24rpx;
				color: #6F6F6F;
			}
		}

		.problem-box {
			width: 100%;
			height: 168rpx;
			background: linear-gradient(225deg, #FFFFFF 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.p-type {
				font-size: 28rpx;
			}

			.p-text {
				font-size: 24rpx;
				color: #797979;
			}
		}

		.ask-box {
			position: absolute;
			bottom: 40rpx;
			width: calc(100% - 40rpx);

			.tips text {
				line-height: 60rpx;
				font-size: 24rpx;
				background: #F9F9F9;
				border-radius: 20rpx;
				padding: 0 20rpx;
				.iconfont{
					font-size: 24rpx;
				}
			}
		}
	}
</style>